<template>
  <!-- 提交订单 -->
  <div>
    <van-nav-bar fixed title="提交订单" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top has-bottom">
      <div>
        <div class="mlr-25">
          <div class="item">
            <div class="flex-s-s ptb-40 plr-25 list-bg" @click="addressShow=true">
              <svg-icon icon-class="location-1" class="fs-42 color-primary flex-s-0 mr-15" />
              <div class="flex-1">
                <p class="fs-28">
                  <span class="color-gray">联系人：</span>
                  <span class="color-black">{{ address.ContactName }} <span class="ml-20">{{ address.ContactTel }}</span></span>
                </p>
                <div class="flex-s-c mt-15">
                  <p class="color-gray">收货地址：{{ address.ProvinceName }}{{ address.CityName }}{{ address.AreaName }}{{ address.StreetName }}{{ address.ContactAddress }}</p>
                  <p class="arrow pos-r arrow-box" />
                </div>
              </div>
            </div>
          </div>
          <div class=" item">
            <p class="flex-v-c hb plr-20 ptb-25">
              <svg-icon icon-class="store-1" class="fs-30" />
              <span class="fs-26 ml-15"> {{ Model.PurchaseMemberName }}</span>
            </p>
            <div v-for="(item,index) in Model.PurchaseProductList" :key="index" class="pd-20 product-item">
              <div class=" flex-s-c">
                <img-box class="is-120 br-4 flex-s-0 flex-g-0" :img-url="item.ProductImg" />
                <p class="text-show-line-2 pl-20 flex-1">{{ item.ProductName }}</p>
              </div>
              <div v-for="(ite,inde) in item.CarSkuList" :key="inde" class="spec-item">
                <div class="flex-s-c">
                  <p class="flex-1">
                    <span v-show="ite.Attribute"><span class="color-gray-light">规格：</span>{{ ite.DispalyAttribute }} </span>
                  </p>
                  <p class="color-primary">￥<span class="fs-30">{{ ite.Price * ite.Amount }}</span></p>
                </div>
                <div class="flex-s-c">
                  <p><span class="color-gray-light">单价：</span>￥{{ ite.Price }}<span v-show="item.DefaultUnit">/{{ item.DefaultUnit </span></p>
                  <p class="color-gray-light">x{{ ite.Amount }}{{ item.DefaultUnit }}</p>
                </div>
              </div>
            </div>

          </div>
          <div class="item">
            <div class="plr-25">
              <p class="flex-s-c fs-28 lh-76">
                <span>商品</span>
                <span>￥{{ totalPrice }}</span>
              </p>
              <!-- <p class="flex-s-c fs-28 lh-76">
                <span>优惠</span>
                <span>-￥5931.00</span>
              </p>
              <p class="flex-s-c fs-28 lh-76">
                <span>运费</span>
                <span>+￥31.00</span>
              </p>
              <div class=" fs-28 lh-76">
                <p class="checkbox checked" @click=""><span>可使用<span class="color-primary">100</span>积分抵扣<span class="color-primary">100</span></span></p>
              </div> -->
            </div>
            <p class="ht tar fs-30 ptb-34 plr-25">
              还需支付：<span class="color-primary">￥{{ totalPay }}</span>
            </p>
          </div>
          <!-- <div class="item"><p class="lh-90 arrow plr-25 pos-r">需要填写信息</p></div> -->
          <div class="item pd-25">
            <p>买家留言(选填）</p>
            <van-field v-model="requsetData.remark" type="textarea" class=" fs-24 mt-15" placeholder="请在此处填写留言~" />
          </div>
        </div>
      </div>
    </div>
    <!-- 底部栏购物车 -->
    <shopCart :car-list="carlist" :total-type="totalType" :total-num="totalAmount" :total-pay="totalPay" car-type="submit" @gotoPay="gotoPay" />

    <van-popup v-model="addressShow" position="bottom" class="bottom-popup">
      <addressList class=" bg-gray" style="min-height:100vh" @colseAdress="closePopup" @changeAddress="changeAddress" />
    </van-popup>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
import addressList from 'components/address'
import shopCart from 'components/purchase/shopCart'
import { GetPurchaseCarDetailPage, AddPurchaseOrder } from 'api/purchase'
export default {
  components: { imgBox, addressList, shopCart },
  data() {
    return {
      carlist: [],
      addressShow: false,
      Model: {},
      address: {},
      totalType: 0,
      totalAmount: 0,
      totalPrice: 0,
      totalPay: 0,
      requsetData: {
        remark: '',
        addressId: 0,
        carIds: ''
      }
    }
  },
  computed: {},
  created() {
    console.log(typeof (this.$route.params.ids))
    let ids = this.$route.params.ids
    ids = ids.substring(0, ids.length - 1)
    this.requsetData.carIds = ids
    this.GetPurchaseCarDetailPage(ids)
  },

  methods: {
    closePopup() {
      this.addressShow = false
    },
    changeAddress(address) {
      // 更改地址
      this.address = address
      this.requsetData.addressId = address.ID
      this.addressShow = false
    },
    // 支付，提交订单
    gotoPay() {
      console.log(this.requsetData)
      if (this.requsetData.addressId <= 0) {
        this.$toast('请输入收货地址')
        return
      }
      if (this.requsetData.carIds === '') {
        this.$toast('无商品')
        return
      }
      this.AddPurchaseOrder()
    },

    GetPurchaseCarDetailPage(carIds) {
      const _this = this
      GetPurchaseCarDetailPage({ carIds }).then(res => {
        if (res) {
          _this.Model = res.Data || {}
          if (_this.Model.PurchaseProductList && _this.Model.PurchaseProductList.length > 0) {
            _this.Model.PurchaseProductList.forEach(item => {
              if (item.CarSkuList && item.CarSkuList.length > 0) {
                _this.totalType += item.CarSkuList.length
                item.CarSkuList.forEach(ite => {
                  _this.totalAmount += Number(ite.Amount)
                  _this.totalPrice += Number(ite.Amount) * Number(ite.Price)
                })
              }
            })
          }
          _this.address = res.Data.DefaultAddress || {}
          if (_this.address.ID) {
            _this.requsetData.addressId = _this.address.ID
          }
          // totalPay=totalPrice (暂时的)
          _this.totalPay = _this.totalPrice
        }
      })
    },
    AddPurchaseOrder() {
      AddPurchaseOrder(this.requsetData).then(res => {
        if (res && res.Data) {
          this.$router.push('/purchase/success/' + res.Data)
        }
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.checkbox{
 padding-left: 75px;
 &:before{
   top: 3px;
   left: 23px;
 }
 &:after{
   top: 6px;
   left: 35px;
 }
}
.left-checkbox{
  width: 120px;
  height: 32px;
   &:before{
     top: 0;
   left: 44px;
 }
 &:after{
   left: 56px;
   top: 4px;
 }
}
.item{
  background: $colorF;
  border-radius: 12px;
  margin-top: 20px;
  .list-bg{
     background: url("") #fff repeat-x center bottom;
    background-size: 30px auto;
  }
  .spec-item{
    padding: 10px 20px;
    background: $colorF7;
    border-radius: 6px;
    margin-top: 12px;
  }
  .checkbox{
    padding-left:0;
    &:before{
      right:0;
      top: 20px;
      left:auto;
    }
     &:after{
      right:12px;
      top: 24px;
      left:auto;
    }
  }
  .arrow:after{
    color:$colorC;
    right: 25px;
    top: 40px;
  }
  .arrow-box{
    width: 20px;
    height: 20px;
    margin-left: 40;
    flex-shrink: 0;
    &:after{
      top: 0;
      right: 0;
    }
  }
  .van-cell{
    background: $colorF7;
    border-radius: 6px;
    padding: 10px 6px;
    line-height: 1.5;
  }
}

</style>
